//动态生成100个小格-->100div

var minesNum; //雷的数量
var mineOver; //被标记 的雷的数量
var block;
var mineMap = [];
var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var flagBox = document.getElementById('flagBox');
var closeBtn = document.getElementById('closeBtn');
var score = document.getElementById('score');
var startGame = true;

bindEvent();

function bindEvent() {
	startBtn.onclick = function() {
		if (startGame) {
			box.style.display = 'block';
			flagBox.style.display = 'block';
			init(); //初始化格子,雷
			startGame = false;
		}
	}
	//取消默认事件
	box.oncontextmenu = function() {
		return false;
	}
	//采用事件冒泡
	box.onmousedown = function(e) {
		var e = e || window.event;
		var event = e.target;
		if (e.which == 1) {
			leftClick(event);
		} else if (e.which == 3) {
			rightClick(event);
		}
	}
	closeBtn.onclick = function() {
		alertBox.style.display = 'none';
		box.style.display = 'none';
		flagBox.style.display = 'none';
		box.innerHTML = '';
		startGame = true;
	}
}


function init() {
	minesNum = 10;
	mineOver = 10;
	score.innerHTML = mineOver;
	for (var i = 0; i < 10; i++) {
		for (var j = 0; j < 10; j++) {
			var con = document.createElement('div');
			con.classList.add('block');
			con.setAttribute('id', i + '-' + j);
			box.appendChild(con);
			//添加标记
			mineMap.push({
				mine: 0
			});
		}
	}
	block = document.getElementsByClassName('block');
	while (minesNum) {
		var mineIndex = Math.floor(Math.random() * 100);
		if (mineMap[mineIndex].mine === 0) {
			mineMap[mineIndex].mine = 1;
			block[mineIndex].classList.add('isLei');
			minesNum--;
		}
	}
}

function leftClick(dom) {
	if (dom.classList.contains('flag')) {
		return;
	}
	var isLei = document.getElementsByClassName('isLei');
	if (dom && dom.classList.contains('isLei')) {
		//over
		for (var i = 0; i < isLei.length; i++) {
			isLei[i].classList.add('show');
		}
		setTimeout(function() {
			alertBox.style.display = 'block';
			closeBtn.style.display = 'block';
			alertImg.style.backgroundImage = 'url("images/fail.jpg")';
		}, 800);
	} else {
		var n = 0; //计数
		var posArr = dom && dom.getAttribute('id').split('-');
		var posX = posArr && +posArr[0];
		var posY = posArr && +posArr[1];
		dom && dom.classList.add('num');

		for (var i = posX - 1; i <= posX + 1; i++) {
			for (var j = posY - 1; j < posY + 1; j++) {
				var aroundBox = document.getElementById(i + '-' + j);
				if (aroundBox && aroundBox.classList.contains('isLei')) {
					n++;
				}
			}
		}
		dom && (dom.innerHTML = n);
		if (n == 0) {
			for (var i = posX - 1; i <= posX + 1; i++) {
				for (var j = posY - 1; j < posY + 1; j++) {
					var nearBox = document.getElementById(i + '-' + j);
					if (nearBox && nearBox.length != 0) {
						if (nearBox && nearBox.classList.contains('check')) {
							nearBox.classList.add('check');
							leftClick();
						}
					}
				}
			}
		}
	}
}

function rightClick(dom) {
	if (dom.classList.contains('num')) {
		return;
	}
	dom.classList.add('flag');
	dom.classList.toggle('flag');
	if (dom.classList.contains('isLei') && dom.classList.contains('flag')) {
		mineOver--;
	}
	if (dom.classList.contains('isLei') && !dom.classList.contains('flag')) {
		mineOver++;
	}
	score.innerHTML = mineOver;
	if (mineOver == 0) {
		alertBox.style.display = 'block';
		closeBtn.style.display = 'block';
		alertImg.style.backgroundImage = 'url("images/success.jpg")';
	}
}
